<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单</title>
</head>
<style>
    *{font-size: 12px; margin:0; padding:0}
    .nav {background-image: linear-gradient(45deg, #2B74CA, #2B74CA, #011123,  #1c7828, #fff, #fff);}
    .nav li {list-style: none;display: inline-block; }
    .nav a {display: inline-block;text-decoration: none;color: #ffffff; padding: 0.75em 1.5em;}
    .nav li:hover {background-color: #a7a7a7;}
    .sub-nav {position: absolute; left: -999em;}
    .sub-nav li {display: block;width: 100%;background-color: #e8e8e8;}
    .sub-nav a {color: #000000;}
    .nav li:hover .sub-nav {left: auto; min-width:10em}
    .sub-nav li:hover a {color: #ffffff;}

    .now_time {float:right; margin-right:5rem;font-weight: bold;}
    .now_time p {height:3em; line-height:2.75rem}
    .exit{float:right; margin-right:5rem;font-weight: bold;}
    .exit a{color:#000; padding:0 1rem; text-decoration: none;display:inline-block; height:2.75rem; line-height: 2.75em;}
    .hello{float:right;height:2.75rem;font-weight:bold;}
    .hello p {height:3em; line-height:2.75rem;
        animation: blink 2s linear infinite; -webkit-animation: blink 2s linear infinite;
        -moz-animation: blink 2s linear infinite; -ms-animation: blink 2s linear infinite;
        -o-animation: blink 2s linear infinite;}
    @keyframes blink {0% {color: #000;} 50% {color: transparent;}100% {color: #000;}}

    .mainFrame{overflow: auto; width:100%;height:92vh; background-color: #f6fdf6;}
    footer{text-align:center;width: 100%; height: 4vh;line-height:3em;background-color: #eeeeee;}
    footer a{text-decoration:none}

</style>
<body th:with="nowDate=${#dates.format(new java.util.Date().getTime(), 'yyyyMMdd')}">
    <ul class="nav">
        <li th:each="menu,iterStat: ${menuTree}"><a href="#">[[${menu.menuName}]]</a>
            <ul class="sub-nav">
                <li th:each="subMenu,iterStat: ${menu.childs}" ><a th:href="@{${subMenu.menuUri}}" target="mainFrame">[[${subMenu.menuName}]]</a></li>
            </ul>
        </li>
        <!--<li class="exit"><a href="javascript:void(0);" onclick="logout();">退出</a></li>-->
        <li class="now_time"><p id="dateTimeDisplay"></p></li>
        <li class="hello"><p>你好！</p></li>
    </ul>
    <iframe class="mainFrame" name="mainFrame" scrolling="auto" frameborder="no" width="100%" height="100%" th:src="@{/html/welcome.html}"></iframe>
    <footer>
        <p>
            <a href="https://gitee.com/hhf002/rpa" target="_blank">欢迎交流 https://gitee.com/hhf002/rpa</a>
        </p>
    </footer>
</body>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var indexUrl = /*[[@{/admin}]]*/ null;
    var logout = function () {
        window.location.href = indexUrl;
    }

    function updateDateTime() {
        const now = new Date();
        // 获取完整的日期和时间
        let dateTimeString = now.toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' +
                             now.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit', second: '2-digit'});
        // 确保document.getElementById('dateTimeDisplay')返回一个非null的对象
        let dateTimeElement = document.getElementById('dateTimeDisplay');
        if (dateTimeElement) {
            dateTimeElement.textContent = dateTimeString;
        } else {
            console.error("Element with ID 'dateTimeDisplay' not found.");
        }
    }

    // 立即调用函数以初始化日期时间显示
    updateDateTime();

    // 每隔一秒钟（1000毫秒）调用updateDateTime函数
    setInterval(updateDateTime, 1000);
    /*]]>*/
</script>
</html>
